<template>
  <div>
    <h4>Parent Component</h4>
    <p>Car Name: {{ car.name }}</p>
    <p>Car Color: {{ car.color }}</p>
    <p>Car Year: {{ car.year }}</p>
    <p>Car Price: {{ car.price }}</p>
    <button class="btn" @click="handlePrice(1000)">Add 1000 to Price</button>
  </div>
  <Child v-model="car" />
  <!-- <Child :modelValue="car" @update:modelValue="handleModelValue" /> -->
</template>

<script lang='ts' setup>
import { reactive } from 'vue';
import Child from './Child.vue';

let car = reactive({
  name: 'BMW',
  color: 'red',
  year: 2021,
  price: 100000
});
const handlePrice = (newPrice: number): void => {
  car.price += newPrice;
}

// const handleModelValue = (newModelValue: any) => {
  // car.name = newModelValue.name;
  // car.color = newModelValue.color;
  // car.year = newModelValue.year;
  // car.price = newModelValue.price;
// }

</script>

<style scoped lang='scss'></style>
